﻿@extends('layouts.shop_main')

@section('title', '授权管理')

@section('resources')
    @parent
    <style>
        .header{margin: 0 30px 20px 30px;padding: 10px 0;overflow: hidden;border-bottom: 1px solid #eee;}
        .header p{float: left;font-size: 18px;}
        .search{margin: 0 30px;}
        .search li{overflow: hidden;margin: 20px 0;}
        .search li p{float: left;overflow: hidden;}
        .search li p span{float: left;text-align: right;font-size: 14px;color: #808080;line-height: 25px;padding-right: 10px;}
        .search li p input{width: 100px;background-color: #9955c6;color: #fff;height: 30px;border-radius: 3px;padding: 5px;}
        .search li table{border: 1px solid #000;}
        .search li table td{text-align: center;font-size: 16px;padding: 10px 0;}
        .prompt{width: 300px;position: absolute;top: 200px;left: 50%;margin-left: -150px;box-shadow: 0px 0px 5px 5px rgba(128,128,128,0.5);background-color: #fff;display: none;z-index: 1001;}
        .prompt .title{overflow: hidden;width: 100%;height: 50px;line-height: 50px;}
        .prompt .title span{float: left;font-size: 16px;color: #808080;margin-left: 15px;}
        .prompt .title img{float: right;width: 20px;margin-top: 15px;margin-right: 15px;cursor: pointer;}
        .prompt .prompt_content{padding: 15px 30px;font-size: 14px;}
        .prompt .button{overflow: hidden;}
        .prompt .button span{padding: 15px 50px;font-size: 16px;cursor: pointer;}
    </style>
@endsection

@section('content')
	<div class="content">
        <div class="header">
            <p>授权管理</p>
        </div>
        <ul class="search">
            <li>
                <p>
                    <span>管理员为员工创建子账号开通功能权限，子账号可登录商家后台与商家版App进行门店管理。</span>
                </p>
                <p style="float: right;">
                    <a href="/shop/common/account/new">
                        <input type="button" name="" value="新增子账号">
                    </a>
                </p>
            </li>
            <li>合计：15个子账号  8个启用状态 7个停用状态</li>
            <li>
                <table style="width: 100%;" cellpadding="10">
                    <thead>
                        <tr>
                            <td>子账号</td>
                            <td>姓名</td>
                            <td>所属门店</td>
                            <td>账号状态</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="/shop/common/account/check" style="color: #551A8B;">18122334455</a></td>
                            <td>张三</td>
                            <td>罗纳咖啡（新建店）</td>
                            <td>启用</td>
                            <td>
                                <a href="/shop/common/account/edit">编辑</a>
                                <a href="#" onclick="promptBox()">停用</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </li>
        </ul>   
    </div>
    <div class="prompt">
        <p class="title">
            <span>提示框</span>
            <img src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
        </p>
        <p class="prompt_content">
            确定对子账号 张三 (13412341234) 停用么？
        </p>
        <p class="button">
            <span class="cancel" style="float: left;">取消</span>
            <span class="sure" style="float: right;">确定</span>
        </p>
    </div>
@endsection

@section('scriptResources')
    @parent
    <script>
         function promptBox(){
            $(".prompt").show();
            $(".promit_mark").show();
            $(".promit_mark").height($(window).height());
         }
         $(".cancel").click(function(){
            $(".prompt").hide();
            $(".promit_mark").hide();
         })
         $(".prompt .title img").click(function(){
            $(".prompt").hide();
            $(".promit_mark").hide();
         })
    </script>
@endsection